<%@include file="startUpIncludes.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>
            New Account
        </title>
    <script type="text/javascript" src="../js/modalwin.js"></script>
 
        <script type="text/javascript">
		function getAjaxCities() {
		// alert($('#country').val());
		var selectedCountry = $('#country').val();
		
		$.ajax({
		type: "POST",
		url: "/sales/s/leadFormCityCountry",
		data: "selectedCountry="+selectedCountry,
		success: function(response){
		var cities = response.split('***');
		var Ids = cities[0];
		var Names = cities[1];
		var cityIds = Ids.split("?");
		var cityNames = Names.split("?");
		// alert(cityIds[0]);
		//alert(cityNames[0]);
		$('#city').html('');
		jQuery.each(cityIds , function(index, value){
		var option = "<option value='" + value + "'>" + cityNames[index] + "</option>";
		$('#city').append(option);
		});
		},
		error: function(e){
		//alert('Error: ' + e);
		}
		});
		}
		</script>

<script type="text/javascript">
function doKeyUpValidation(text) {
    var validationRegex = RegExp(/[1-9]+/, "g");  // The regex was wrong
    if( !validationRegex.match(text.value) )
    {
        alert('Please enter only numbers.');
    }
} // this was missing before
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('[id^=empNum]').keypress(validateNumber);
});
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;

    if (event.keyCode == 8 || event.keyCode == 46
     || event.keyCode == 37 || event.keyCode == 39) {
        return true;
    }
    else if ( key < 48 || key > 57 ) {
        return false;
    }
    else return true;
};
        </script>
    </head>
    <body>
    <jsp:include page="header.jsp" >
		<jsp:param value="true" name="loggedIn"/>
	</jsp:include>
    <div class="modal-win-bg">
        <div class="modal-win-box">
            <div class="modal-win-hd">
                <span class="modal-win-title"></span>
                <span class="modal-win-close">x</span>
            </div>
            <div class="modal-win-content"></div>
            <a class="form-btn modal-win-ok">OK</a>
        </div>
    </div>
    <div class="wrap">
	<div class="fitBG">
        <div class="main">
		<%@include file="basicLeftMenu.jsp" %>
            <div class="content">
				<jsp:include page="tabs.jsp" >
					<jsp:param value="accounts" name="currentPage"/>
				</jsp:include>
                <div class="tab-content">
                <h3>New Account</h3>
                                
                <form:form ccsClass="new-lead-form" commandName="accountForm" method="post" action="/sales/s/new-account" >
                <form:errors path="*" cssClass="error-block" element="div" />
                <form:hidden path="id"/>
                <div class="btns">
                <input type="submit" value="Save" class="form-btn"/><a href="/sales/s/accounts" class="form-btn">Cancel</a>                
                </div>
                <div class="form-row">
                    <h4>Required Information</h4>
                    <div class="info"><label>Account Owner:</label><span>${userDetails.fName} ${userDetails.lName}</span></div>
                    <div class="input-col">
                        <label>Account Name:  *</label>
                        <form:input path="accountName" cssClass="TB"/>
                    </div>
                    <div class="input-col">
                    </div>
                </div>
                <div class="form-row">
                    <h4>Account Information</h4>
                    <div class="input-col">
                        <label>Company Name  *:</label>
                        <form:input path="companyName" cssClass="TB" name="companyName"/>
                        <label>Phone: </label>
                        <form:input path="phone" cssClass="TB" name="phone"/>
                        <label>Mobile: </label>
                        <form:input path="mobile" cssClass="TB" name="mobile"/>
                    </div>
                    <div class="input-col">
                        <label>Fax: </label>
                        <form:input path="fax" cssClass="TB" name="fax"/>
                        <label>Email:</label>
                        <form:input path="email" cssClass="TB" name="email"/>
                    </div>
                </div>
                <div class="form-row">
                    <h4>Address Information</h4>
                    <div class="input-col">
                        <label>Street: </label>
                        <form:textarea path="street" cssClass="TB" name="street"></form:textarea>
                        <label>Country:</label>
                        <form:select path="country" cssClass="TB" name="country" onchange="getAjaxCities();" id="country">
							
							<c:forEach var="country" items="${countries}">
								<form:option value="${country.id}">${country.countryName}</form:option>
							</c:forEach>
						</form:select>
                        <label>Area: </label>
                        <form:input path="state" cssClass="TB" name="state"/>
                    </div>
                    <div class="input-col">
                        <label>Zip/Postal Code: </label>
                        <form:input path="zipCode" cssClass="TB" name="zipCode"/>
                        <%--<label>City: </label>
                        <form:select path="city" cssClass="TB" name="city" id="city">
                        	<option value="0">--none--</option>
                        	<c:forEach items="${cities}" var="city">
                        			<form:option value="${city.id}">${city.name}</form:option>
                        	</c:forEach>
                        </form:select>--%>
                        <label>Website: </label>
                        <form:input path="website" cssClass="TB" name="website"/>
                    </div>
                </div>
                <div class="form-row">
                    <h4>Additional Information</h4>
                    <div class="input-col">
                        <label>No. of Employees: </label>
                        <form:input path="empNum" cssClass="TB" id="empNum" name="empNum" placeholder="--none--" maxlength="4"/>
                        <label>Annual Revenue:</label>
                        <form:input path="annualRevenue" cssClass="TB" name="annual"/>
                        <label>Description: </label>
                        <form:textarea path="description" cssClass="TB" name="desc"></form:textarea>
                    </div>
                    <div class="input-col">
                        <label>Type: </label>
						<form:select path="type" id="accountType" name="accountType" cssClass="TB" >
						  <c:forEach items="${types}" varStatus="type">
                          	<form:option value="${type.index}">${types[type.index].name}</form:option>
                          </c:forEach>
						</form:select>
                        <label>Industry: </label>
                        <form:select path="industry" cssClass="TB" name="industry">
                          <c:forEach items="${industries}" varStatus="industry">
                          	<form:option value="${industry.index}">${industries[industry.index].name}</form:option>
                          </c:forEach>
                        </form:select>
                    </div>
                </div>
                <div class="btns">
                   <input type="submit" value="Save" class="form-btn"/><a href="/sales/s/accounts" class="form-btn">Cancel</a>
                </div>
                </form:form>
                </div>
            </div>
        </div>
        
	<%@include file="footer.jspf" %>
    </div>
    </div>

    </body>
</html>